<template lang='pug'>
  section
    van-contact-card(
      :type="cardType"
      :name="currentContact.name"
      :tel="currentContact.tel"
      @click="showList = true"
      )
    van-popup(v-model="showList" position="bottom")
      van-contact-list(
        v-model="chosenContactId"
        :list="list"
        @add="onAdd"
        @edit="onEdit"
        @select="onSelect"
        )
    van-popup(v-model="showEdit" position="bottom")
      van-contact-edit(
        :contact-info="editingContact"
        :is-edit="isEdit"
        @save="onSave"
        @delete="onDelete"
        )
</template>

<script type='text/ecmascript-6'>
  export default {
    data() {
      return {
        chosenContactId: 0,
        editingContact: {},
        showList: false,
        showEdit: false,
        isEdit: false,
        list: [
          {
            name: '张三',
            tel: '13000000001',
            id: 0
          },
          {
            name: '李四',
            tel: '13000000001',
            id: 1
          },
        ],
      };
    },

    computed: {
      cardType() {
        return this.chosenContactId !== null ? 'edit' : 'add';
      },

      currentContact() {
        const id = this.chosenContactId;
        return id !== null ? this.list.filter(item => item.id === id)[0] : {};
      }
    },

    methods: {
      // 添加联系人
      onAdd() {
        this.editingContact = { id: this.list.length };
        this.isEdit = false;
        this.showEdit = true;
      },

      // 编辑联系人
      onEdit(item) {
        this.isEdit = true;      
        this.showEdit = true;
        this.editingContact = item;
      },

      // 选中联系人
      onSelect(index) {
        this.showList = false;
      },

      // 保存联系人
      onSave(info) {
        this.showEdit = false;
        // this.showList = false;
        
        if (this.isEdit) {
          this.list = this.list.map(item => item.id === info.id ? info : item);
        } else {
          this.list.push(info);
        }
        this.chosenContactId = info.id;
      },

      // 删除联系人
      onDelete(info) {
        this.showEdit = false;
        this.list = this.list.filter(item => item.id !== info.id);
        if (this.chosenContactId === info.id) {
          this.chosenContactId = null;
        }
      }
    }
  };
</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>

@import '~assets/stylus/variable.styl'
 
</style>
